<script setup>
import Table from "@/components/table/index.vue";
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getListByPageAPI, delAPI,getByIdAPI } from "@/api/wedding/orderInfo";
import orderInfoLayer from "./layer.vue";

/************************************定义变量************************************************/
//表格数据
const tableData = ref([]);
//表格loading
const loading = ref(false);
//选中的数据
const chooseData = ref([]);
//表格选中数据事件
const handleSelectionChange = (val) => {
  chooseData.value = val;
};
// 弹窗控制器
const layer = reactive({
  show: false,
  title: "新增",
  showButton: true,
});
// 存储搜索用的数据
const query = reactive({
  searchValue: "",
  type: "",
  status: "",
  createTime: null,
});
// 分页参数, 供table使用
const page = reactive({
  index: 1,
  size: 20,
  total: 1,
});

/************************************定义弹窗************************************************/
// 新增弹窗功能
const redeem = () => {
  layer.title = "核销订单";
  layer.show = true;
  delete layer.row;
};
// 新增弹窗功能
const handleAdd = () => {
  layer.title = "新增数据";
  layer.show = true;
  delete layer.row;
};
// 编辑弹窗功能
const handleEdit = (row) => {
  layer.title = "编辑数据";
  getByIdAPI(row.id).then((res) => {
    layer.row = res.data;
    layer.show = true;
  });
};
// 编辑弹窗功能
const handleView = (row) => {
  layer.title = "查看数据";
  getByIdAPI(row.id).then((res) => {
    layer.row = res.data;
    layer.show = true;
  });
};

/************************************定义事件************************************************/
// 批量删除功能
const handleDel = (data) => {
  let params = data.map((e) => {
    return e.id;
  });
  delAPI(params).then((res) => {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    getTableData(true);
  });
};
  // 重置搜索条件
const resetQuery = () => {
  query.searchValue = "";
  query.type = "";
  query.status = "";
  query.createTime = null;
  getTableData(true);
};
// 搜索功能
const getTableData = (init) => {
  loading.value = true;
  if (init) {
    page.index = 1;
  }
  let params = {
    current: page.index,
    pageSize: page.size,
    ...query,
  };
  getListByPageAPI(params)
    .then((res) => {
      tableData.value = res.data.list;
      page.total = Number(res.data.total);
    })
    .catch((error) => {
      tableData.value = [];
      page.index = 1;
      page.total = 0;
    })
    .finally(() => {
      loading.value = false;
    });
};

/************************************生命周期************************************************/
//获取表格数据
onMounted(() => {
  // 在组件挂载后执行的代码
  getTableData(true);
});
</script>

<template>
  <div class="layout-container">
    <div class="layout-container-form">
      <div class="layout-container-form-search">
        <el-form-item label="关键词：">
          <el-input v-model="query.searchValue" placeholder="请输入关键词" />
        </el-form-item>
        <el-form-item label="订单类型：">
          <el-select v-model="query.type" placeholder="请选择订单类型" style="width: 150px;">
            <el-option label="服务订单" value="0" />
            <el-option label="商品订单" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="query.status" placeholder="请选择订单状态" style="width: 150px;">
            <el-option label="待付款" value="0" />
            <el-option label="已预约" value="5" />
            <el-option label="待完成/待取货" value="1" />
            <el-option label="已完成" value="2" />
            <el-option label="已取消" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单生成时间：">
        <el-date-picker
          v-model="query.createTime"
          type="date"
          placeholder="选择日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 180px;"
        />
        </el-form-item>
        <el-button
          type="primary"
          icon="Search"
          class="search-btn"
          @click="getTableData(true)"
          >搜索</el-button
        >
        <el-button
          type="default"
          icon="Refresh"
          class="reset-btn"
          @click="resetQuery"
        >重置</el-button>
      </div>

      <div class="layout-container-form-handle">
        <el-button type="primary" @click="redeem">核销订单</el-button>
        <!-- <el-popconfirm title="批量删除" @confirm="handleDel(chooseData)">
          <template #reference>
            <el-button type="danger" icon="Delete" :disabled="chooseData.length === 0">批量删除</el-button>
          </template>
        </el-popconfirm> -->
      </div>
    </div>
    <div class="layout-container-table">
      <Table
        ref="table"
        v-model:page="page"
        v-loading="loading"
        :showIndex="true"
        :showSelection="true"
        :data="tableData"
        @getTableData="getTableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="code" label="订单编号" align="center" />
        <el-table-column prop="type" label="订单类型" align="center">
          <template #default="scope">
            <span v-if="scope.row.type == '0'">服务订单</span>
            <span v-else-if="scope.row.type == '1'">商品订单</span>
          </template>
        </el-table-column>
<!--        <el-table-column prop="orderAmount" label="订单金额" align="center" />-->
        <el-table-column prop="amount" label="付款金额" align="center" >
          <template #default="scope">
            <span v-if="scope.row.isDeposit == '0'  && scope.row.status !== '2' ">{{scope.row.amount}}</span>
            <span v-if="scope.row.isDeposit == '1'   " >{{scope.row.orderAmount}}</span>
            <span v-if="scope.row.isDeposit == '0'  && scope.row.status == '2' ">{{scope.row.orderAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" align="center">
          <template #default="scope">
            <span v-if="scope.row.status == '0'">待付款</span>
            <span v-else-if="scope.row.status == '1'   &&  scope.row.type == '0' ">待完成</span>
            <span v-else-if="scope.row.status == '1'    &&  scope.row.type == '1' ">待取货</span>
            <span v-else-if="scope.row.status == '2'">已完成</span>
            <span v-else-if="scope.row.status == '3'">已取消</span>
            <span v-else-if="scope.row.status == '4'">已核销</span>
            <span v-else-if="scope.row.status == '5'">已预约</span>
          </template>
        </el-table-column>
<!--        <el-table-column prop="redeemCode" label="兑换码" align="center" />-->
        <el-table-column
          prop="agreementTime"
          label="预约下单日期"
          align="center"
          width="120"
        />
        <el-table-column prop="contact" label="联系人" align="center" />
        <el-table-column prop="phone" label="联系方式" align="center" />
        <el-table-column prop="arrivalTime" label="酒店到店时间" align="center" />
        <el-table-column prop="subscribeTime" label="酒店预约时间" align="center" />
        <el-table-column prop="payType" label="付款方式" align="center">
          <template #default="scope">
            <span v-if="scope.row.payType == '0'">微信支付</span>
            <span v-else-if="scope.row.payType == '1'">余额支付</span>
          </template>
        </el-table-column>
        <el-table-column prop="payStatus" label="付款状态" align="center">
          <template #default="scope">
            <span v-if="scope.row.payStatus == '0'">待支付</span>
            <span v-else-if="scope.row.payStatus == '1'">已支付</span>
            <span v-else-if="scope.row.payStatus == '2'">已取消</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <!--操作按钮-->
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template #default="scope">
            <el-button @click="handleView(scope.row)">查看</el-button>
            <!-- <el-popconfirm title="删除" @confirm="handleDel([scope.row])">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm> -->
          </template>
        </el-table-column>
      </Table>
    </div>
    <orderInfoLayer :layer="layer" @getTableData="getTableData" v-if="layer.show" />
  </div>
</template>

<style lang="scss" scoped></style>
